<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>渠道管理</el-breadcrumb-item>
				<el-breadcrumb-item>商店渠道管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-card>
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="首页展示" name="1">
					<!-- <el-button class="btnprimary fontsize16" @click="showAdd">添加渠道</el-button> -->
					<div class="channelList">
						<div class="channelItem" v-for="(item,index) in listData" :key="item.id">
							<span>{{item.name}}</span>
							<el-select v-model="item.value" placeholder="请选择" @change="changeListData(item.id,item.value)">
							    <el-option
							      v-for="items in options"
							      :key="items.value"
							      :label="items.label"
							      :value="items.value"
								  >
							    </el-option>
							  </el-select>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="发现页展示" name="2">
					<div class="channelList">
						<div class="channelItem" v-for="(item,index) in list2Data" :key="item.id">
							<span>{{item.name}}</span>
							<el-select v-model="item.value" placeholder="请选择" @change="changelist2Data(item.id,item.value)">
							    <el-option
							      v-for="items in options2"
							      :key="items.value"
							      :label="items.label"
							      :value="items.value">
							    </el-option>
							</el-select>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
			
		</el-card>
		<el-dialog
		  title="添加渠道"
		  :visible.sync="addDialogVisible"
		  width="50%">
			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
				<el-form-item label="渠道标识" prop="name">
				  <el-input v-model="addForm.name" placeholder="请输入渠道标识"></el-input>
				</el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addDialogVisible = false">取 消</el-button>
		    <el-button class="btnprimary" @click="addListData">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				addDialogVisible:false,
				activeName:'1',
				listData:[],
				options: [{
				  value: '0',
				  label: '默认可见'
				}, {
				  value: '1',
				  label: '所有用户登录后可见'
				}, {
				  value: '2',
				  label: '其他渠道用户登录后可见'
				}, {
				  value: '3',
				  label: '已实名用户登录后可见'
				}, {
				  value: '4',
				  label: '默认不可见'
				}],
				list2Data:[],
				options2: [{
				  value: '0',
				  label: '默认可见'
				}, {
				  value: '1',
				  label: '所有用户登录后可见'
				}, {
				  value: '2',
				  label: '其他渠道用户登录后可见'
				}, {
				  value: '3',
				  label: '已实名用户登录后可见'
				}, {
				  value: '4',
				  label: '默认不可见'
				}],
				addForm:{
					name:''
				},
				addFormRules:{
					name:[
						{ required: true, message: '请输入活动名称', trigger: 'blur' },
					]
				}
			}
		},
		created() {
			this.getList();
			this.getList2();
		},
		methods:{
			async getList(){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.get('/commoditychannel/list')
				console.log(res)
				this.listData = res.data
				this.listData.forEach((item,index)=>{
					switch(item.code){
						case "isyingyongOpen":
							this.$set(item,'name','应用宝')
							break
						case "ishuaweiOpen":
							this.$set(item,'name','华为')
							break
						case "isxiaomiOpen":
							this.$set(item,'name','小米')
							break
						case "issougouOpen":
							this.$set(item,'name','搜狗')
							break
						case "isoppoOpen":
							this.$set(item,'name','OPPO')
							break
						case "isvivoOpen":
							this.$set(item,'name','vivo')
							break
						case "isa360Open":
							this.$set(item,'name','360')
							break
						case "isbaiduOpen":
							this.$set(item,'name','百度')
							break
						case "ismeizuOpen":
							this.$set(item,'name','魅族')
							break
						case "isiosOpen":
							this.$set(item,'name','ios')
							break
						case "isiosChinaOpen":
							this.$set(item,'name','ios（中国IP）')
							break
						case "isiosAmericanOpen":
							this.$set(item,'name','ios（美国IP）')
							break
						case "isiosOtherOpen":
							this.$set(item,'name','ios（其他IP）')
							break
						case "isatOpen":
							this.$set(item,'name','自然')
							break
						case "iscsOpen":
							this.$set(item,'name','测试')
							break
						default:
						this.$set(item,'name',item.code)
							//这里是没有找到对应的值处理
							break
					}
					
				})
				setTimeout(() => {
				  loading.close();
				}, 500);
			},
			handleClick() {
				console.log(this.activeName);
			},
			async getList2(){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.get('/loanMakketManage/list')
				console.log(res);
				this.list2Data = res.data
				this.list2Data.forEach((item,index)=>{
					switch(item.code){
						case "isyingyongOpen":
							this.$set(item,'name','应用宝')
							break
						case "ishuaweiOpen":
							this.$set(item,'name','华为')
							break
						case "isxiaomiOpen":
							this.$set(item,'name','小米')
							break
						case "isoppoOpen":
							this.$set(item,'name','OPPO')
							break
						case "isvivoOpen":
							this.$set(item,'name','vivo')
							break
						case "issougouOpen":
							this.$set(item,'name','搜狗')
							break
						case "isa360Open":
							this.$set(item,'name','360')
							break
						case "isbaiduOpen":
							this.$set(item,'name','百度')
							break
						case "ismeizuOpen":
							this.$set(item,'name','魅族')
							break
						case "isiosOpen":
							this.$set(item,'name','ios')
							break
						case "isiosChinaOpen":
							this.$set(item,'name','ios（中国IP）')
							break
						case "isiosAmericanOpen":
							this.$set(item,'name','ios（美国IP）')
							break
						case "isiosOtherOpen":
							this.$set(item,'name','ios（其他IP）')
							break
						case "isatOpen":
							this.$set(item,'name','自然')
							break
						case "iscsOpen":
							this.$set(item,'name','测试')
							break
						default:
						this.$set(item,'name',item.code)
							//这里是没有找到对应的值处理
							break
					}
					
				})
				setTimeout(() => {
				  loading.close();
				}, 500);
			},
			showAdd(){
				this.addDialogVisible = true
			},
			async changeListData(id,value){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/commoditychannel/update',{"id":id,"type":value})
				if(res.code!==200){
					return this.$message.error('修改失败')
				}else{
					this.$message.success('修改成功')
				}
				setTimeout(() => {
				  loading.close();
				}, 500);
			},
			async changelist2Data(id,value){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/loanMakketManage/update',{"id":id,"type":value})
				if(res.code!==200){
					return this.$message.error('修改失败')
				}else{
					this.$message.success('修改成功')
				}
				setTimeout(() => {
				  loading.close();
				}, 500);
			},
			async addListData(){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/commoditychannel/save',{"channelCode":this.addForm.iconname})
				if(res.code!==200){
					return this.$message.error('添加失败')
				}else{
					this.$message.success('添加成功')
				}
				setTimeout(() => {
				  loading.close();
				}, 500);
			}
		}
	}
</script>

<style lang="less" scoped>
	.el-tabs{
		margin-top: 15px;
	}
	.channelList{
		width: 98%;
		margin-top: 15px;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.channelItem{
			width: 38%;
			margin-bottom: 25px;
			display: flex;
			justify-content: flex-start;
			span{
				margin-right: 10px;
				display: inline-block;
				width: 142px;
			}
			
		}
		:nth-child(2n) {
		  display: flex;
		  justify-content: flex-end;
		}
	}
	
</style>
